<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo/demo.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serialize-object.js"></script>
</head>
<body>
    <table id="dg">

    </table>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save', closed: true" style="width:400px;height:280px;padding:10px">
        <form id="ff" class="easyui-form" data-options="novalidate:true">
            <div style="margin-bottom: 10px" id="userId">
                ID:<input type="text" name="_id">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="name" style="width:80%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="password" style="width:80%" data-options="label:'Password:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="email" style="width:80%" data-options="label:'Email:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="tel" style="width:80%" data-options="label:'Tel:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="birthday" style="width:80%" data-options="label:'Birthday:',required:true">
            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
</body>
</html>
<script>
    function submitForm(){
        $('#ff').form('submit',{
            onSubmit:function(){
                if($(this).form('enableValidation').form('validate')){
                    //ajax操作
                    var data=$('#ff').serializeObject();
                    if(data._id&&data._id.trim().length>0){
                        //存在，则只修改
                        $.ajax({
                            method:"put",
                            url:"http://localhost:3000/users/data/"+data._id,
                            data:data,
                        }).done(function (res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        });

                    }else {
                        //不存在，则添加，还要把当前的id给删掉
                        delete data._id;
                        $.ajax({
                            method:"post",
                            url:"http://localhost:3000/users/data",
                            data:data,
                        }).done(function (res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        });
                    }
                }else{

                    $.messager.alert('提示','请重新输入用户信息!');
                }
            }
        });
    }
    function clearForm(){
        $('#ff').form('clear');
    }
    $(function () {

        var toolbar=[{
            text:'添加',
            iconCls:'icon-add',
            handler:function(){
                $('#dlg').dialog('open');
                $('#ff input').val("");
                $('#ff input[name="_id"]').attr("readonly","readonly");


            }
        },{
            text:'删除',
            iconCls:'icon-cut',
            handler:function(){
                var s=$('#dg').datagrid('getSelections');
                var arr=[];
                var len=s.length;
                for(var i=0;i<len;i++){
                    arr.push(s[i]._id);
                }
                if(arr.length>0){
                    var data=arr.toString();
                    $.messager.confirm('提示', '你确定要删除吗?', function(b){
                        console.log(data);
                        if (b){
                            $.ajax({
                                url:"http://localhost:3000/users/deletes",
                                method:"post",
                                data:{idarr:data}
                            }).done(function (res) {
                                console.log(res.status);
                                if(res.status==200){
                                    $.messager.alert('提示','删除成功!');
                                }else {
                                    $.messager.alert('提示','请选择要删除的数据！','warning');
                                }
                                $('#dg').datagrid('reload');
                            })
                        }
                    });

                }else {
                    $.messager.alert('提示','请选择要删除的数据！','warning');
                }
            }
        },
            {
                text:'搜索',
                iconCls:'icon-search',
                handler:function(){
                    $.messager.prompt('提示', '请输入您要输入的内容：', function(r){
                        if (r){
                            $('#dg').datagrid('load', {
                                name: r,
                                address: 'ho',
                            });
                            $('#dg').datagrid('reload');
                        }
                    });
                }
            },
            {
                text:'刷新',
                iconCls:'icon-reload',
                handler:function(){
                    $('#dg').datagrid('load', {
                        name: '',
                        address: 'ho',
                    });
                    $('#dg').datagrid('reload');
                }
            }
        ];

        $('#dg').datagrid({
            url:'http://localhost:3000/users/list',
            method:'post',
            pagination:true,
            toolbar:toolbar,
            fit:true,
            columns:[[
                {field:'ck',checkbox:true},
                {field:'_id',title:'ID',width:200},
                {field:'name',title:'用户名',width:100},
                {field:'password',title:'密码',width:80,},
                {field:'email',title:'邮箱',width:80},
                {field:'tel',title:'手机号码',width:80},
                {field:'birthday',title:'出生年月',width:100},
                {field:'opt',title:'操作',width:120,
                    formatter: function(value,row,index){
                       return "<a href='javascript:void(0)' name='upd' class='easyui-linkbutton' onclick='editrow(this)' data-id='"+JSON.stringify(row)+"'>修改</a> " +
                           "<a href='javascript:void(0)' name='del' class='easyui-linkbutton' onclick='delrow()'>删除</a>";
                    }
                }

            ]],
            onLoadSuccess:function(data){
                $("a[name='upd']").linkbutton({text:'修改',plain:true,iconCls:'icon-edit'});
                $("a[name='del']").linkbutton({text:'删除',plain:true,iconCls:'icon-cut'});
            },
            onDblClickRow(index,row){
                editRow(row);
            }
        });

    });
    function editRow(row){
        $('#dlg').dialog('open');
        $('#ff').form('load',row);

    }
    function editrow(ee) {
        var obj=JSON.parse($(ee).attr('data-id'));
        $('#dlg').dialog('open');
        $('#ff').form('load',obj);
    }
    function delrow() {
        $.messager.confirm('提示', '你确定要删除吗?', function(b){
            if (b){
                var id=$('#dg').datagrid('getSelected');
                $.ajax({
                    url:"http://localhost:3000/users/data/"+id._id,
                    method:"delete",
                    data:id
                }).done(function (res) {
                    console.log(res.status);
                    if(res.status==200){
                        $.messager.alert('提示','删除成功!');
                    }else {
                        $.messager.alert('提示','请选择要删除的数据！','warning');
                    }
                    $('#dg').datagrid('reload');
                })
            }else{
                $('#dg').datagrid('clearChecked');
            }
        });
    }

</script>